<script lang="ts">
import Card from "@/components/CardTwo.vue";
import {resourceApi} from "@/api/resourceApi";

export default {
  data() {
    return {
      activeNavItem1: 'tag1',
      tag1: true,
      tag2: false,
      tag3: false,
      tag4: false,
      resourceIds:[],
      tags:'课后服务/经典阅读/教育类',
      agriculture: false,
      industry: false,
      service: false
    };
  },
  components: {
    Card
  },
  methods: {
    load() {
      resourceApi.searchResources(this.tags, '')
          .then(async result => {
            const res = result.data;
            this.resourceIds = res.map(item => item.resourceId);
          })
    },
    activateNavItem(id) {
      this.activeNavItem1 = id;
    },
    Tag1() {
      this.tag1 = true;
      this.tag2 = false;
      this.tag3 = false;
      this.tag4 = false;
      this.activeNavItem1 = 'tag1';
      this.agriculture = false;
      this.industry = false;
      this.service = false;
      this.tags = '课后服务/经典阅读/教育类';
      this.load();
    },
    Tag2() {
      this.tag2 = true;
      this.tag1 = false;
      this.tag3 = false;
      this.tag4 = false;
      this.activeNavItem1 = 'tag2';
      this.tags = '课后服务/经典阅读/名著-古典名著';
      this.agriculture = true;
      this.load();
    },
    Tag3() {
      this.tag3 = true;
      this.tag2 = false;
      this.tag1 = false;
      this.tag4 = false;
      this.activeNavItem1 = 'tag3';
      this.tags = '课后服务/经典阅读/名著-外国诗歌';
      this.load();
    },
    Tag4() {
      this.tag4 = true;
      this.tag2 = false;
      this.tag3 = false;
      this.tag1 = false;
      this.activeNavItem1 = 'tag4';
      this.tags = '课后服务/经典阅读/青少年读物-儿童文学';
      this.load();
    },
  },
  created() {
    this.load();
  }
};
</script>

<template>
  <div class="button-container">
    <div>分类</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'tag1' }" @click="activateNavItem('tag1')" @click.stop="Tag1()"> 教育类</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'tag2' }" @click="activateNavItem('tag2')" @click.stop="Tag2()"> 名著-古典名著</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'tag3' }" @click="activateNavItem('tag3')" @click.stop="Tag3()"> 名著-外国诗歌</div>
    <div class="nav-item" :class="{ 'active-nav-item': activeNavItem1 === 'tag4' }" @click="activateNavItem('tag4')" @click.stop="Tag4()"> 青少年读物-儿童文学</div>
  </div>
  <div v-if="resourceIds.length > 0" class="card-container">
    <Card v-for="resourceId in resourceIds" :key="resourceId" :resourceId="resourceId"/>
  </div>
</template>

<style scoped>
.button-container {
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 10px 20px;
  border-radius: 20px;
  display: flex; /* 使用flex布局 */
  text-align: center; /* 文本居中 */
  background-color: white; /* 默认背景颜色 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.nav-item:hover {
  color: #007bff; /* 鼠标悬停时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标悬停时的背景颜色 */
}

.nav-item:active {
  color: #007bff; /* 鼠标点击时的字体颜色 */
  background-color: #e6e6fa; /* 鼠标点击后保持白色背景 */
}
.active-nav-item {
  background-color: #e6e6fa !important; /* 确保背景色为白色 */
  color: #007bff !important; /* 确保字体颜色 */
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px; /* 左边距设置为负值，用于抵消第一个卡片的左边距 */
  margin-right: -5px; /* 右边距设置为负值，用于抵消最后一个卡片的右边距 */
  margin-top: -5px; /* 上边距设置为负值，用于抵消第一个卡片的上边距 */
  margin-bottom: 10px; /* 下边距设置为正值，用于卡片之间的间距 */
}

.card-container .card {
  width: calc(25% - 10px); /* 每个卡片占据25%的宽度减去间距 */
  margin: 5px; /* 卡片的上下左右间距 */
  box-sizing: border-box; /* 包括padding和border在内的宽度计算 */
}
</style>